<template>
  <div class="category">
    <nav-bar class="nav-bar">
      <template v-slot:center>商品分类</template>
    </nav-bar>
    <div class="content">
      <category-left-menu :category="category" @selectItem="selectItem" />
      <scroll :data="[categoryData]" class="content-scroll" ref="scroll">
        <div>
          <category-tab-content :subcategory="showSubcategory" />
          <tab-control class="tab-control" :title="['综合', '新品', '销量']" @tabClick="tabClick" />
          <category-tab-content-detail :category-detail="showCategoryDetail" />
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabControl/TabControl";

import CategoryLeftMenu from "./childComps/CategoryLeftMenu";
import CategoryTabContent from "./childComps/CategoryTabContent";
import CategoryTabContentDetail from "./childComps/CategoryTabContentDetail";

import {
  getCetagory,
  getSubcategory,
  getSubcategoryDetail,
} from "network/category";

import scroll from "components/common/scroll/Scroll";

import { tabControlMixin,itemImageListener } from "common/mixin";

export default {
  name: "Category",
  components: {
    NavBar,
    TabControl,
    CategoryLeftMenu,
    CategoryTabContent,
    CategoryTabContentDetail,
    scroll,
  },
  mixins: [tabControlMixin,itemImageListener],
  data() {
    return {
      category: [],
      categoryData: {},
      // 这里 currentIndex必须为 -1 目的是为了下面的判断
      currentIndex: -1,
    };
  },
  computed: {
    showSubcategory() {
      //  erro 'subcategory' of undefined"
      /*
      这里涉及到 computed watch methos 的执行顺序
      如果有computed计算属性，页面在加载时，就会先执行一次computed里面的方法
      而这个时候页面还没加载完毕，created里面的网络请求还没有发送出去，所以subcategory是未定义的
      */
      // 所以这里需要加一层保险，去判断，如果 currentIndex = -1 就返回一个空对象
      if (this.currentIndex == -1) return {};
      return this.categoryData[this.currentIndex].subcategory;
    },
    showCategoryDetail() {
      if (this.currentIndex == -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType];
    },
  },
  created() {
    // 发送网络请求
    this._getCetagory();
  },
  destroyed() {
    this.$bus.$off("itemImgLoad", this.itemImageListener);
  },
  methods: {
    // 网络请求的方法
    _getCetagory() {
      getCetagory().then((res) => {
        this.category = res.data.category.list;
        for (let i = 0; i < this.category.length; i++) {
          this.categoryData[i] = {
            subcategory: {},
            categoryDetail: {
              'pop': [],
              'new': [],
              'sell': [],
            },
          };
        }
        // 请求第一个分类的数据
        this._getSubcategory(0);
      });
    },
    _getSubcategory(index) {
      this.currentIndex = index;
      // 获取 maitKey
      const maitKey = this.category[index].maitKey;
      // 发送网络请求传入 maitKey
      getSubcategory(maitKey).then((res) => {
        this.categoryData[index].subcategory = res.data;
        // 对象展开
        this.categoryData = { ...this.categoryData };
        this._getSubcategoryDetail("pop");
        this._getSubcategoryDetail("new");
        this._getSubcategoryDetail("sell");
      });
    },
    _getSubcategoryDetail(type) {
      const miniWallkey = this.category[this.currentIndex].miniWallkey;
      getSubcategoryDetail(miniWallkey, type).then((res) => {
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },
    // 事件响应的方法
    selectItem(index) {
      this._getSubcategory(index);
    },
  },
};
</script>

<style scoped>
.category {
  height: 100vh;
}
.nav-bar {
  color: #fff;
  background-color: var(--color-tint);
}
.content {
  display: flex;
  margin-top: 1px;
  height: calc(100% - 44px - 49px);
  overflow: hidden;
}
.content-scroll {
  flex: 1;
  height: 100%;
}
</style>
